<template>
    <BaseComponent :variant="{ extends: 'default', color: 'light' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent :variant="{ extends: 'default', color: 'dark' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent :variant="{ extends: 'default', color: 'primary' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent :variant="{ extends: 'default', color: 'secondary' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent :variant="{ extends: 'default', color: 'success' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent :variant="{ extends: 'default', color: 'info' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent :variant="{ extends: 'default', color: 'warning' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>

    <BaseComponent :variant="{ extends: 'default', color: 'danger' }">
        Some quick example text to make up the bulk of the box's content.
    </BaseComponent>
</template>
